<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react/react17.development.js"></script>
    <script src="../react/react-dom17.development.js"></script>
    <script src="../react/babel.min.js"></script>
</head>

<body>
    <div id="main"></div>
    <script type="text/babel">
        class ComOne extends React.Component {
            render() {
                // console.log('render调用11111')
                return (<div>
                    <h1>111111</h1>
                </div>)
            }

            // componentDidMount() {
            //     console.log('调用111111');
            // }
        }
        class ComTwo extends React.Component {
            render() {
                // console.log('render调用22222');
                return (<div>
                    <h1>2222222222</h1>
                </div>)
            }

            // componentDidMount() {
            //     console.log('调用22222');
            // }
        }
        class Com extends React.Component {
            constructor() {
                super();
                this.state = {
                    isShow: true
                }
            }

            render() {
                let { isShow } = this.state;
                return (<div>
                    <h1>com</h1>
                    <button onClick={() => {
                        this.setState({
                            isShow: !isShow
                        })
                    }}>切换组件</button>
                    {isShow ? <ComOne /> : <ComTwo />}
                </div>);
                // {isShow > 10 &&<ComOne/>} // 当isShow为true 会加载后面的组件
                // {isShow?<ComOne/>:<ComTwo/>}
                // {isShow?<ComOne/>:10>100?<ComTow>:<ComOnaa>}
            }
        }
        ReactDOM.render(<Com/>,document.getElementById('main'))
    </script>
</body>

</html>